<template>
  <div class="permission">
    <!-- 卡片容器 -->
    <el-card>
      <!-- 添加菜单的按钮 -->
      <div class="menubtn">
        <!-- 添加一项 是顶级 所以pid必然为0 -->
        <el-button type="primary" size="small" @click="openAdd(1, '0')">
          <i class="el-icon-edit"></i>&nbsp;&nbsp;添加菜单
        </el-button>
      </div>
      <!-- 表格 -->
      <el-table :data="list" row-key="id">
        <el-table-column label="菜单名称" prop="name"></el-table-column>
        <el-table-column label="权限标识" prop="code"></el-table-column>
        <el-table-column label="描述" prop="description"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.type === 1" @click="openAdd(2, scope.row.id)">添加权限</el-button>
            <el-button type="text">查看 api 权限</el-button>
            <el-button type="text" @click="openEdit(scope.row.id)">查看</el-button>
            <el-button type="text" @click="mydel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 编辑权限面板组件 -->
      <panel ref="mypanel" :panelShow.sync="panelShow" @updatedata="getAllPer"></panel>
    </el-card>
  </div>
</template>

<script>
// 导入编辑组件
import panel from './components/panel.vue'
//导入操作权限管理的接口
import { getAllPerApi, delPerApi } from '@/api/permission.js'
export default {
  components: {
    panel
  },
  methods: {
    // 借用新增面板执行操作 根据传过来的参数判断是执行的哪种操作
    // 如果pid是0则为添加一项，pid为某一确定值，则为该大项下的具体子项，为其分配权限
    openAdd (type, pid) {
      // 显示面板
      this.panelShow = true
      // 打开面板
      this.$refs.mypanel.getData(type, pid)
    },
    // 打开编辑面板
    openEdit (id) {
      this.panelShow = true
      // 传值给组件
      this.$refs.mypanel.getPer(id)
    },
    // 删除权限
    mydel (id) {
      // 询问用户是否删除数据
      this.$confirm('您确定删除当前权限数据吗')
        .then(async () => {
          // 提交数据到服务器
          await delPerApi(id)
          // 提示删除成功
          this.$message.success('删除成功')
          // 更新数据
          this.getAllPer()
        })
        .catch(() => {
          console.log('取消')
        })
    },
    //得到所有的权限
    async getAllPer () {
      const res = await getAllPerApi()
      // 保存权限点数据
      this.list = this.trunData(res.data, '0')
    },
    // 将列表数据转为树形数据
    trunData (arr, pid) {
      const res = []
      arr.forEach(item => {
        if (item.pid === pid) {
          const children = this.trunData(arr, item.id)
          if (children.length > 0) {
            item.children = children
          }
          res.push(item)
        }
      })
      return res
    }
  },
  created () {
    this.getAllPer()
  },
  data () {
    return {
      // 权限列表的数据源
      list: [],
      // 控制面板显示与隐藏
      panelShow: false
    }
  }
}
</script>

<style lang="scss">
.permission {
  margin: 20px;

  .menubtn {
    text-align: right;
  }
}
</style>
